<template>
    <div class="dy-main AccountAddCard">
        <div class="bea-header">
            <x-header title="信用卡账户信息" :left-options="{backText: ''}"></x-header>
        </div>
        <div class="bea-body">
            <ul class="message-items">
                <li class="message-item">
                    <pre class="message-title">卡   号:</pre>
                    <span class="message-content">6228 **** **** 1113</span>
                </li>
                <li class="message-item">
                    <span class="message-title">开户日期:</span>
                    <span class="message-content">2015-07-14</span>
                </li>
                <li class="message-item">
                    <span class="message-title">账户状态:</span>
                    <span class="message-content">正常</span>
                </li>
                <li class="message-item">
                    <span class="message-title">可用额度:</span>
                    <span class="message-content high-light-content">17,000.00</span>
                </li>
                <li class="message-item">
                    <span class="message-title">账户余额:</span>
                    <span class="message-content high-light-content">+0.00</span>
                </li>
                <li class="message-item">
                    <span class="message-title">临时额度:</span>
                    <span class="message-content">0.00</span>
                </li>
                <li class="message-item">
                    <span class="message-title">账单日:</span>
                    <span class="message-content">25</span>
                </li>
                <li class="message-item">
                    <span class="message-title">永久信用额度:</span>
                    <span class="message-content">17,000.00</span>
                </li>
                <li class="message-item">
                    <span class="message-title">自动扣缴账号:</span>
                    <span class="message-content">未开通</span>
                    <a href="javascript:" class="btn-open">开通</a>
                </li>
                <li class="message-item">
                    <span class="message-title">本期最后还款日:</span>
                    <span class="message-content">2018-05-15</span>
                </li>
                <li class="message-item">
                    <span class="message-title">分期未分摊总额:</span>
                    <span class="message-content high-light-content">+0.00</span>
                </li>
                <li class="message-item">
                    <span class="message-title">预借现金信用额:</span>
                    <span class="message-content high-light-content">8,500.00</span>
                </li>
                <li class="message-item">
                    <span class="message-title">预借现金可用额:</span>
                    <span class="message-content high-light-content">8,500.00</span>
                </li>
                <li class="message-item">
                    <span class="message-title">临时额度生效日:</span>
                    <span class="message-content"></span>
                </li>
                <li class="message-item">
                    <span class="message-title">临时额度失效日:</span>
                    <span class="message-content"></span>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
  export default{ }
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
    @px: 10rem/750;

    .bea-body {
        background-color: #fff;
        border-radius: .2rem;
        .message-items {
            font-size: 28*@px;
            padding: 20*@px 45*@px;
            margin-top: 20*@px;
            .message-item {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-top: 20*@px;
                &:first-child {
                    margin-top: 0;
                }
                &:nth-child(9) {
                    margin-top: 17*@px;
                }
                &:nth-child(10) {
                    margin-top: 17*@px;
                }
                .message-title {
                    width: 230*@px;
                    color: #989898;
                }
                .message-content {
                    color: #1B1B1B;
                }
                .high-light-content {
                    color: #FBB13E;
                }
                .btn-open {
                    display: block;
                    width: 100*@px;
                    height: 46*@px;
                    line-height: 46*@px;
                    color: #4F82EF;
                    border: 1px solid #4F82EF;
                    box-sizing: border-box;
                    border-radius: 5*@px;
                    text-align: center;
                    margin-left: 30*@px;
                }
            }
        }
    }
</style>